<div class="ad-container" fxLayout="column">

  <div mdcCard class="card-title" fxLayout="row wrap" fxLayoutAlign="center center">
    <button mdcButton raised dense type="button" (click)="fileInput.click()">
      选择仓库图片
    </button>
    <input #fileInput type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg"
      (change)="previewImage($event)" style="display:none;">
    <button mdcButton raised dense [disabled]="!imageSrc" (click)="objectRegonition()">开始识别</button><br>
    <a href="https://github.com/Luke-lujunxian/aktools/blob/auto-fillin/HOWTOHELP.md"><small>识别率低/识别出错？</small></a>
  </div>
  <div mdcCard fxLayout="row wrap">
    <div mdcCardActions fullBleed fxFlex="100">
      <a mdcButton (click)="toMaterialCalc()">
        保存并导入材料计算器 <i class="material-icons" aria-hidden="true">arrow_forward</i>
      </a>
    </div>

    <ng-container *ngFor="let m of detectedItemList">
      <div class="matcard-item" fxFlex="25" fxFlex.gt-xs="16" fxLayout="column" fxLayoutAlign="space-between center">
        <div fxLayout="row" fxLayoutAlign="start center">
          <div class="matcard-item-image">
            <img class="mat-icon" src="../../assets/img/material/{{m[0]}}.png" />
          </div>
          <div class="mat-card-item-title">
            <p>{{this.getMaterialInfo(m[0])}}</p>
          </div>
        </div>
        <div>
          <div mdcTextField dense class="input-field">
            <span>
              <button mdcButton dense (click)="m[1]=m[1]-(m[1]>0?1:0)">
                <i mdcButtonIcon class="material-icons">remove</i>
              </button>
            </span>
            <span>
              <input mdcTextFieldInput #input1="ngModel" type="number" [(ngModel)]="m[1]">
              <label mdcFloatingLabel class="mdc-floating-label--float-above">识别结果</label>
            </span>
            <span>
              <button mdcButton dense (click)="m[1]=m[1]+1">
                <i mdcButtonIcon class="material-icons">add</i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </ng-container>

  </div>


  <img fxHide=false style="width: 100%; height: 100%" [src]="imageSrc||''" id="display" alt="等待上传">

</div>